<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.main {
				width: 200px;
				height: 200px;
				border: 1px solid saddlebrown;
			}
		</style>
		<script type="text/javascript" src="../js/jquery-1.12.4.js">
			
		</script>
	</head>

	<body>
		<div id="main">
			<ul id="ul1">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
		<div id="info">

		</div>
		<script type="text/javascript">
			var ul = document.getElementById("ul1")
			document.write("<br />节点名称:" + ul.nodeName);
			document.write("<br />节点类型:" + ul.nodeType);
			document.write("<br />获取节点:" + ul.firstElementChild);
			document.write("<br />节点文本:" + ul.firstElementChild.firstChild.nodeName);
			document.write("<br />节点文本:" + ul.firstElementChild.firstChild.nodeType);
			var inp = document.getElementsByName("name")[0];
			var div = document.getElementById("main");
			var ul = document.getElementById("ul1");
			document.write("<br />ul节点：" + ul);
			var v = ul.firstElementChild.firstChild.nodeValue;
			document.write("<br />ul节点值：" + v);
			var vtype = ul.firstElementChild.firstChild.nodeType;
			document.write("<br />文本类型：" + vtype);
			var liname = ul.firstElementChild.nodeName;
			document.write("<br />元素类型：" + liname);
			var litype = ul.firstElementChild.nodeType;
			document.write("<br />元素类型：" + litype);
			var li2 = ul.firstElementChild.nextElementSibling.nodeValue;
			var li22 = ul.lastElementChild.previousElementSibling.previousElementSibling.nodeType;
			//操作节点
			var inp = document.createElement("input");
			inp.setAttribute("type", "text");
			inp.setAttribute("value", "王彦博");
			var info = document.getElementById("info");
			info.appendChild(inp);
			var a = document.createElement("a");
			a.setAttribute("href", "index.html");
			a.innerHTML = "<br />去index.html<br />";
			info.insertBefore(a, inp);
			//删除节点
			info.remove(a);
			//复制
			var a1 = a.cloneNode();
			main.appendChild(a);
			var inp1 = inp.cloneNode();
			main.appendChild(inp);
			//替换
			var btn = document.createElement("input");
			btn.setAttribute("type", "button");
			btn.setAttribute("value", "按钮")
			main.replaceChild(btn, inp);
			//css样式
			ul.firstElementChild.style.color = "red";
			ul.firstElementChild.nextElementSibling.style.background = "orange";
			ul.lastElementChild.style.fontSize = "30px";
			var div3 = document.createElement("div");
			div3.setAttribute("id", "div3");
			div3.style.width = "100px";
			div3.style.header = "100px";
			div3.style.background = "blue";
			main.appendChild(div3);
			div3.setAttribute("onmouserver", "test()");
			div3.setAttribute("onmouseout", "test1()");

			function test() {
				info.style.display = "none";
			}

			function test1() {
				info.style.display = "block";
			}
			var c= div.className = "main";
			//只试用于IE浏览器
			//document.write("<br />main的div的宽是："+div.currentStyle.width);
			var w= document.defaultView.getComputedStyle(div,null).width
			document.write("<br />main的div的宽是："+w);
			document.write("<br  />左边距："+div.offsetLeft);
			document.write("<br  />上边距："+div.offsetTop);
			document.write("<br  />元素高度："+div.offsetHeight);
			document.write("<br  />元素宽度："+div.offsetWidth);
			document.write("<br  />元素于滚动条的垂直位置："+div.scrollTop);
			document.write("<br  />元素于滚动条的水平位置："+div.scrollLeft);
			document.write("<br  />元素的可见高度："+div.clientHeight);
			document.write("<br  />元素的可见宽度："+div.clientWidth);
			document.write("<br  />元素的可见宽度："+document.getElementById("main").clientHeight);
		</script>
	</body>
</html>